<template>
  <div class="home">
    <el-container class="container">
      <el-aside width="auto">
        <AsideMenu />
      </el-aside>
      <el-container>
        <el-header class="header">
          <Header />
        </el-header>
        <el-main>
          <div class="main-container">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <DialogClockIn ref="dialogClockInRef" :clockinCategoryList="clockinCategoryList" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useCurrentViews, useClockinCategoryStore } from '../stores'
import Header from '../components/Header/Index.vue'
import AsideMenu from '../components/AsideMenu/Index.vue'
import DialogClockIn from '../components/dialog/DialogClockIn.vue'

const dialogClockInRef = ref()
const clockinCategoryList = ref<{ dictValue: number; dictLabel: string }[]>(useClockinCategoryStore().getAll())

useCurrentViews().currentViews

</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .container {
    height: 100%;
    .header {
      padding: 0;
      height: auto;
      border-bottom: 1px solid var(--el-border-color);
    }
  }
  .main-container {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
</style>
